let { layer, $, form, laydate } = layui;
export default class Add {
    constructor(tableIns) {
        this.render();
        this.handle(tableIns);
    }
    render() {
        let template = `
                <form class="layui-form" lay-filter="addFac" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">电影</label>
                        <div class="layui-input-block">
                            <select id="filmsInfo" name="films" lay-filter="films" lay-verify="required">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">影院</label>
                        <div class="layui-input-block">
                            <select id="cinemasInfo" name="cinemas" lay-filter="cinemas" lay-verify="required">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" id="dateBox">
                        
                    </div>
                    <div id="scheduleBox"></div>
                </form>
            `;
        $('#addFacTemplate').html(template);
    }
    handle(tableIns) {
        let index = 0, index2 = 0;
        layer.open({
            type: 1,
            title: '新增排片',
            content: $('#addFacTemplate').html(),
            area: ['300px', '500px'],
            btn: '添加',
            success(layero, ind) {
                form.render();
                $.ajax({
                    type: 'get',
                    url: '/films/all',
                    success(res) {
                        for (let i = 0; i < res.data.length; i++) {
                            $('#filmsInfo').append(`<option value="${res.data[i]._id}">${res.data[i].name}</option>`);
                        }
                        form.render('select');
                    }
                });
                $.ajax({
                    type: 'get',
                    url: '/cinemas/all',
                    success(res) {
                        for (let i = 0; i < res.data.length; i++) {
                            $('#cinemasInfo').append(`<option value="${res.data[i]._id}">${res.data[i].name}</option>`);
                        }
                        form.render('select');
                        form.on('select(cinemas)', function (data) {
                            let id = data.value;
                            if (id) {
                                $('#dateBox').html(`
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="addSchedule">新增日期</button>
                                        </div>
                                    `)
                                form.render();
                                $('#addSchedule').click(function () {
                                    let sid = 0;
                                    let str = `
                                            <div class="layui-form-item" style="width:200px;margin:auto;">
                                                <input type="text" name="date" class="layui-input" placeholder="选择日期" id="date${index}">
                                                <button type="button" id="addScreens${index}" class="layui-btn layui-btn-radius layui-btn-normal" style="margin-left:50px;">放映厅</button>
                                                <div id="screens${index}" class="screensBox" data-id="${index}"></div>
                                            </div>
                                        `;
                                    $('#scheduleBox').append(str);
                                    form.render();
                                    let screensid = $(`#screens${index}`).attr('data-id');
                                    index++;
                                    for (let i = 0; i < index; i++) {
                                        laydate.render({
                                            elem: `#date${i}` //指定元素
                                        });
                                    }
                                    $(`#addScreens${screensid}`).click(function () {
                                        $.ajax({
                                            type: 'get',
                                            url: '/cinemas/' + id,
                                            success(res) {
                                                let screens = res.data.screens;
                                                let str2 = `
                                                        <form class="layui-form" style="padding:10px;border: 1px solid #000;" lay-filter="screenData${screensid}_${sid}">
                                                            <div>
                                                                <label class="layui-form-label">放映厅</label>
                                                                <select name="name" id="screensName${screensid}_${sid}"></select>
                                                            </div>
                                                            <div>
                                                                <label class="layui-form-label">开始时间</label>
                                                                <input type="text" name="time" id="time${screensid}_${sid}" required lay-verify="required" placeholder="开始时间" class="layui-input">
                                                            </div>
                                                            <div>
                                                                <label class="layui-form-label">结束时间</label>
                                                                <input type="text" name="end" id="end${screensid}_${sid}" required lay-verify="required" placeholder="结束时间" class="layui-input">
                                                            </div>
                                                            <div>
                                                                <label class="layui-form-label">语言</label>
                                                                <input type="text" name="language" id="language${screensid}_${sid}" required lay-verify="required" placeholder="语言" class="layui-input">
                                                            </div>
                                                            <div>
                                                                <label class="layui-form-label">票价</label>
                                                                <input type="text" name="price" id="price${screensid}_${sid}" required lay-verify="required" placeholder="票价" class="layui-input">
                                                            </div>
                                                        <form>
                                                    `;
                                                $(`#screens${screensid}`).append(str2);
                                                form.render();
                                                for (let i = 0; i < screens.length; i++) {
                                                    $(`#screensName${screensid}_${sid}`).append(`<option value="${screens[i].name}">${screens[i].name}</option>`)
                                                    form.render('select');
                                                }
                                                sid++;
                                                index2++;
                                            }
                                        })
                                        console.log(index, sid, index2);
                                    })
                                })
                            } else {
                                $('#dateBox').html()
                            }
                        })
                    }
                })
            },
            yes(ind) {
                let { films, cinemas } = form.val('addFac');
                let schedule = [];
                for (let i = 0; i < index; i++) {
                    let screen = [];
                    let sid = 0;
                    for (let j = 0; j < index2; j++) {
                        console.log(i, sid);
                        let formData = form.val(`screenData${i}_${sid}`)
                        if (formData.name) {
                            screen.push(formData);
                        }
                        sid++;
                    }
                    schedule.push({
                        date: $(`#date${i}`).val(),
                        screens: screen
                    })
                    console.log(schedule);
                }
                $.ajax({
                    type: 'post',
                    url: '/fac',
                    data: {
                        films,
                        cinemas,
                        schedule: JSON.stringify(schedule)
                    },
                    success(res) {
                        tableIns.reload();
                        console.log(res);
                    }
                })
                layer.close(ind);
            }
        })
    }
}